<!--suppress CssInvalidPseudoSelector -->
<template>
  <div>
    <div style="margin-top: -10px">
      <el-button
        :disabled="!dictName"
        v-permission="permission.add"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="addDictDetail"
      >
        添加详情
      </el-button>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="所属字典">
        {{ dictName }}
      </el-table-column>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="编码" />
      <el-table-column prop="num" label="排序" />
      <el-table-column
        v-permission="['100', 'dict:edit', 'dict:del']"
        label="操作"
        width="130px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-permission="permission.edit"
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="editDict(scope.row)"
          ></el-button>
          <el-button
            v-permission="permission.del"
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="delDict(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->

    <!--表单组件-->
    <el-dialog
      class="nowDialog"
      v-dialogDrag
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dictDetailDialogShow"
      width="550px"
    >
      <template slot="title">
        <div style="font-family: cursive">{{ dialogTitle }}</div>
      </template>
      <el-form
        ref="form"
        :model="myForm"
        :rules="rules"
        size="small"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属字典">
              <el-input
                v-model="dictName"
                :disabled="true"
                style="width: 170px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model="myForm.name" style="width: 170px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="编码" prop="code">
              <el-input v-model="myForm.code" style="width: 170px" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input v-model="myForm.num" style="width: 170px" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="cancel">取消</el-button>
        <el-button :loading="submitStatus" type="primary" @click="saveOrEdit"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudDictDetail from "@/api/system/dictDetail";
import crudDict from "@/api/system/dict";
import msgUtil from "@/utils/msgUtil";


const defaultForm = {
  id: null,
  pcode: null,
  code: null,
  name: null,
  num: 999,
  tips: null,
};

export default {
  data() {
    return {
      loading: false,
      myTitle: "",
      myForm: {
        id: null,
        pcode: this.pcode,
        code: null,
        name: null,
        num: 999,
        tips: null,
      },
      selections: [], //选中的数据

      query: { pcode: "" },
      submitStatus: false,
      tableData: [],

      dictDetailDialogShow: false,
      dialogTitle: "编辑字典详情",
      flag: "",
      pcode: null,
      dictName: null,
      rules: {
        name: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
        code: [{ required: true, message: "请输入字典值", trigger: "blur" }],
        num: [
          {
            required: true,
            message: "请输入序号",
            trigger: "blur",
            type: "number",
          },
        ],
      },
      permission: {
        add: ["100", "dict:add"],
        edit: ["100", "dict:edit"],
        del: ["100", "dict:del"],
      },
    };
  },
  mounted() {},
  methods: {
    //刷新列表
    getData() {
      this.loading = true;
      crudDictDetail.get(this.query.pcode).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.tableData = res.data.content;
        }
      });
    },

    editDict(data) {
      this.myForm = JSON.parse(JSON.stringify(data));
      this.dictDetailDialogShow = true;
      this.flag = "edit";
    },
    delDict(id) {
      msgUtil.confirm("确认删除该条数据?").then((res) => {
        let ids = [];
        ids.push(id);
        crudDict.del(ids).then((res) => {
          msgUtil.success2("删除成功!");
            this.getData();
        });
      });
    },
    saveOrEdit() {
      let params = {
        id: this.myForm.id,
        code: this.myForm.code,
        name: this.myForm.name,
        num: this.myForm.num,
        pcode: this.query.pcode,
        tips: this.myForm.tips,
      };
      this.submitStatus = true;
      if (this.flag === "add") {
        crudDict.add(params).then((res) => {
          this.submitStatus = false;
          msgUtil.success2("详情添加成功!");
          this.cancel();
          this.getData();
        });
      } else if (this.flag === "edit") {
        crudDict.add(params).then((res) => {
          this.submitStatus = false;
          msgUtil.success2("详情修改成功!");
          this.cancel();
          this.getData();
        });
      }
    },
    cancel() {
      this.myForm = JSON.parse(JSON.stringify(defaultForm));
      this.dictDetailDialogShow = false;
    },
    addDictDetail() {
      this.dictDetailDialogShow = true;
      this.flag = "add";
      this.myForm={
        id: null,
        pcode: this.pcode,
        code: null,
        name: null,
        num: 999,
        tips: null,
      }
      this.dialogTitle = "添加字典详情";
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

::v-deep .el-dialog {
  border-radius: 6px;
}
</style>
